<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // webStorage  (HTML5新增)
    // WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。(cookie可能会随请求一同传递给服务器, webStorage存储的数据不会随请求传递给服务器)

    // webStorage的两个目标
    // 1.提供一种在cookie之外存储会话数据的路径  (一种新的在用户本地 存储数据的方式)
    // 2.提供一种存储大量可以跨会话存在的数据的机制  (  webStorage  存储大小5M, 也可以跨页面访问(/) )
    // HTML5的WebStorage提供了两种API：localStorage（本地存储 => 长时间存储,只要不删除永远都不会过期）和sessionStorage（会话存储 => 浏览器窗口关闭就过期）

    // webStorage优点:
    // 1. webStorage存储的数据不会随请求传递给服务器, 数据被严格控制在客户端
    // 2. 提供一种存储大量可以跨会话存在的数据的机制
    // 3. WebStorage提供了两种API：localStorage / sessionStorage => 有自己的数据增删改查方法

    // 如何查看localStorage / sessionStorage

    // (1) 手动查看 => 方便调试:   开发者工具 -> application(存储)  -> Storage -> localStorage / sessionStorage(对应域名)

    // (2) JS获取和设置  => localStorage / sessionStorage 全局对象
    // console.log(window.localStorage);
    // console.log(window.sessionStorage);

    // 前提:服务器环境下

</script>

</html>